<template>
  <a-card
    style="width: 100%"
    :bordered="false"
    :tab-list="tabList"
    :active-tab-key="activeKey"
    @tab-change="onTabChange"
    class="field-config"
  />
</template>
<script setup lang="ts">
const emit = defineEmits(['changeTab']);
const props = defineProps({
  currentTab: {
    type: String,
    default: '',
  },
  tabList: {
    type: Array<CommonTypes.TabItem>,
    default: () => [],
  },
});
const activeKey = computed(() => props.currentTab);
const onTabChange = (key: string) => {
  emit('changeTab', key);
};
</script>
<style scoped lang="less">
.field-config {
  :deep(.ant-card-head) {
    padding: 0;
  }
  :deep(.ant-tabs-tab) {
    font-size: 14px;
  }
  :deep(.ant-card-head) {
    border-bottom: none;
    height: 60px;
  }
  :deep(.ant-card-body) {
    padding: 0;
  }
  :deep(.ant-tabs > .ant-tabs-nav, .ant-tabs > div > .ant-tabs-nav) {
    height: 60px;
  }
}
</style>
